<template>
  <div>
    <div class="select-box-con">
      <div class="box-head">
        <h1>Swap on Microseed System</h1>
        <img class="box-close" src="@/assets/images/close.png" @click="close" alt=""/>
      </div>
      <div class="box-main">
        <div class="box-main-item">
          <div><img src="@/assets/images/pop-icon.png" alt="" srcset=""></div>
          <div>
            <div class="number">
              <span>{{willCount}}</span> &nbsp;
              <span>{{ convertunit }}</span>
            </div>
<!--            <div class="number">-->
<!--              $ 6,255,255.855-->
<!--            </div>-->
          </div>
        </div>
        <div class="box-main-item-down">
          <img src="@/assets/images/arrowdown.png">
        </div>
        <div class="box-main-item">
          <div><img src="@/assets/images/pop-icon.png" alt="" srcset=""></div>
          <div>
            <div class="number">
              <span>{{ recieveToNum(willCount) }}</span>&nbsp;
              <span>{{ tokensymbol }}</span>

            </div>
<!--            <div class="number">-->
<!--              $ 6,255,255.855-->
<!--            </div>-->
          </div>
        </div>
        <div class="box-main-pro">
          <span>1{{ convertunit }} ≈ {{ recieveToNum(1) }}{{ tokensymbol }}
<!--            <i>15esc</i>-->
          </span>
          <span>
            <img src="@/assets/images/down.png" alt="" srcset="">
          </span>
        </div>
        <div class="box-main-other">
          <ul>
<!--            <li>-->
<!--              Slippage Tolerance &nbsp;&nbsp;-->
<!--              <span class="det-tips">-->
<!--              <img src="@/assets/images/tips.png" alt="" srcset="">-->
<!--              <span class="tips-box">-->
<!--                <p>Slippage Tolerance</p>-->
<!--                <span class="just-top"></span>-->
<!--              </span>-->
<!--            </span> <span>{{tokeninformation.network_fee}}%</span>-->
<!--            </li>-->
            <li>
              Net Fee &nbsp;&nbsp;
              <span class="det-tips">
                <img src="@/assets/images/tips.png" alt="" srcset="">
                  <span class="tips-box">
                  <p>Net  Tolerance</p>
                  <span class="just-top"></span>
                 </span>
              </span>
              <span>{{ parseFloat(tokeninformation.network_fee * 100).toFixed(4) }}%</span>
            </li>
            <li>
              Minimum received &nbsp;&nbsp;
              <span class="det-tips">
                <img src="@/assets/images/tips.png" alt="" srcset="">
                  <span class="tips-box">
                  <p>Slippage Tolerance</p>
                  <span class="just-top"></span>
                 </span>
              </span>
              <span>{{ finalReceive(willCount, tokeninformation.network_fee) }}</span>
            </li>
          </ul>
        </div>
        <div class="box-main-btn" @click="onsubmit">
          {{$t('swap')}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: `step1`,
  props:{
    defaultCount:{},
    salePrice:{
      default:0.1,
    },
    tokeninformation:{
      default:{},
      required:true
    },
    currency:{
      default:'',
      required:true
    },
    tokensymbol:{
      default:'ARK',
      required:true,
    },
    convertunit:{
      default:'ARK',
      required:true,
    },
    swaprate:{
      default:0,
      required:true
    },
    usdc_rate:{
     default:0,
     required:true
    }
  },
  data(){
    return{
      willCount:1,
    }
  },
  mounted() {
    this.willCount = this.defaultCount
    // console.log(this.currencyToProjectToken(this.willCount));
  },
  methods: {
    close() {
      this.$emit('close')
    },
    recieveToNum(count) {
      if (count > 0) {
        // 1.如果选择钱包类型是ARK，则使用比例兑换： CRE（得项目到积分） = 购买积分数量（submitOrder.count） *  兑换比例（transaction.swaprate）
        // 2.如果选择钱包类型是非ARK,则使用钱包积分 :  CRE（得项目到积分） =  购买积分数量（submitOrder.count）* ARK汇率（transaction.tokeninformation.usdc_rate）* 兑换比例（transaction.swaprate）
        // 1.2两条作废，改成新的计算逻辑，即不用钱包类型判断了，钱包只是一串数值，将根据项目的实际计算类型，即ctype来判断，1为比例计算，2为价格计算
        // if (currency === 'ARK') {
        //   return (count * parseFloat(this.swaprate)).toFixed(2)
        // } else {
        //   return (count * parseFloat(this.usdc_rate)* parseFloat(this.swaprate)).toFixed(2)
        // }
        return parseFloat(count * parseFloat(this.swaprate)).toFixed(0)

      } else
        return 0
    },
    finalReceive(count, fee) {
      if (count > 0) {
        // 1.如果选择钱包类型是ARK，则使用比例兑换： CRE（得项目到积分） = 购买积分数量（submitOrder.count） *  兑换比例（transaction.swaprate）
        // 2.如果选择钱包类型是非ARK,则使用钱包积分 :  CRE（得项目到积分） =  购买积分数量（submitOrder.count）* ARK汇率（transaction.tokeninformation.usdc_rate）* 兑换比例（transaction.swaprate）
        // 1.2两条作废，改成新的计算逻辑，即不用钱包类型判断了，钱包只是一串数值，将根据项目的实际计算类型，即ctype来判断，1为比例计算，2为价格计算
        // if (currency === 'ARK') {
        //   return (count * parseFloat(this.swaprate)).toFixed(2)
        // } else {
        //   return (count * parseFloat(this.usdc_rate)* parseFloat(this.swaprate)).toFixed(2)
        // }
        return parseFloat(parseFloat(count) * (1 - parseFloat(fee)) * parseFloat(this.swaprate)).toFixed(0)

      } else
        return 0
    },
    // 钱包积分转项目积分
    currencyToProjectToken(count){
      if (count > 0) {
        // 1.如果选择钱包类型是ARK，则使用比例兑换： CRE（得项目到积分） = 购买积分数量（submitOrder.count） *  兑换比例（transaction.swaprate）
        // 2.如果选择钱包类型是非ARK,则使用钱包积分 :  CRE（得项目到积分） =  购买积分数量（submitOrder.count）* ARK汇率（transaction.tokeninformation.usdc_rate）* 兑换比例（transaction.swaprate）
        // 1.2两条作废，改成新的计算逻辑，即不用钱包类型判断了，钱包只是一串数值，将根据项目的实际计算类型，即ctype来判断，1为比例计算，2为价格计算
        // if (this.currency === 'ARK') {
        //   return (count * parseFloat(this.swaprate)).toFixed(5)
        // } else {
        //   return (count * parseFloat(this.usdc_rate)* parseFloat(this.swaprate)).toFixed(2)
        // }
        return (count * parseFloat(this.swaprate)).toFixed(4)

      } else
        return 0
    },
    onsubmit(){
      this.$emit('onSwap')
    },
  }
}
</script>

<style scoped>
.select-box-con {
  position: fixed;
  width: 300px;
  height: 470px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.box-main-item {
  background-color: #f5f7f4;
  padding: 10px 10px;
//margin: 10px 0; font-family: Impact, Charcoal, sans-serif; display: flex; justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  box-sizing: border-box;
}
.box-main-item input{
  background-color: transparent;
  outline: none;
  border: 1px solid transparent;
}
.box-main-item input:focus{
  border: 1px solid #6C6C6C;
}

.box-main-item div:nth-child(1) {
  flex: 1;
}

.box-main-item div:nth-child(2) {
  flex: 5;
  display: flex;
  //border: 1px solid red;
  flex-direction: column;
}

.box-main-item div:nth-child(2) div:nth-child(1) {

}

.box-main-item div:nth-child(2) div:nth-child(2) {
  font-size: 5px;
  font-family: "Helvetica Neue", Helvetica;
}

.box-main-pro {
  box-sizing: content-box;
  background-color: #fff;
  padding: 10px 10px;
  font-family: Impact, Charcoal, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.17);
  margin: 15px 0 0 0;
}

.box-main-pro i {
  display: inline-block;
  border-radius: 5px;
  background-color: #ecfbd9;
  padding: 2px 5px;
  font-style: normal;
  font-size: 10px;
  color: #a3b684;
}

.box-main-other {
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px 10px;
  font-family: Impact, Charcoal, sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.17);
  border-top: 0;
  margin: 0;
}

.box-main-other li {
  display: block;
  border: none;
  width: 100%;
  color: rgba(0, 0, 0, 0.66);
  vertical-align: middle;
  line-height: 30px;
  margin-bottom: 0;
  font-family: "Helvetica Neue", Helvetica;
  font-weight: bold;
}

.box-main-other li span:nth-child(1) {
  display: inline-block;
  width: 15px;
  height: 15px;
}

.box-main-other li:hover {
  background-color: transparent;
}

.box-main-other li span:last-child {
  float: right;
  font-size: 5px;
  color: rgba(0, 0, 0, 0.36);

}

.box-main-btn {
  background-color: #7bba55;
  color: #fff;
  text-align: center;
  padding: 15px 10px;
  font-size: 20px;
  box-shadow: #0ec008 0px 0px 2px;
  border-radius: 5px;
  margin: 10px 0;
}

.box-main-item span:nth-child(2) img {
  width: 15px;
}

.box-main-item-down {
  text-align: center;
  padding: 5px;
//transform: rotate(180deg);
}

.box-main-item-down img {
  width: 15px;
  display: inline-block;
  padding: 5px;
  background-color: #7cba54;
  border-radius: 3px;
  box-shadow: #0ec008 0 0 3px;
  transform: scale(1.4);
}
</style>
